<template>
    <footer class="hl-tabbar">
        <ul class="tab-container">
            <hl-tab-item v-if="item.access" :class="active == index?'active':'' " :key="index"  @click="tabItemClick(item,index)"
                         v-for="(item,index) in list" :label="item.label"
                         :icon="item.icon"/>

        </ul>
    </footer>
</template>

<script>
    import HlTabItem from "./hl-tabItem";

    export default {
        components: {HlTabItem},
        name: "hl-tabbar",
        props:{
          active:{
              type:Number,
              default:0,
          }
        },
        data() {
            return {
                list: [
                    {
                        label: "首页",
                        icon: 'icon-index',
                        access:true
                    },
                    {
                        label: "团队",
                        icon: 'icon-team',
                        access:this.$store.state.user.level > 1
                    },
                    {
                        label: "帮助",
                        icon: 'icon-help',
                        access:this.$store.state.user.level > 1
                    },
                    {
                        label: "我",
                        icon: 'icon-me',
                        access:true
                    }
                ],

            }
        },
        methods: {
            tabItemClick(item, index) {
                console.log(item,index)
                this.$emit('tabBarSelect', item, index)
            }
        }
    }
</script>

<style scoped lang="less">
    .hl-tabbar {
        height: 100px;
        font-size: 14px;
        color: #5c5c5c;
        background: #ffffff;
        border-top: solid 1PX #e0e0e0;
        position: fixed;
        z-index: 1000;
        bottom: 0;
        left: 0;
        width: 100%;
        .tab-container {
            display: flex;
            height: 100px;
            flex-direction: row;
            align-items: center;
        }
    }
</style>